<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
        #chart {
            width: 800px;
            height: 400px;
        }
    </style>
</head>
<body>
<div id="chart"></div>
<script>
    const chartDom = document.getElementById('chart')
    const chart = echarts.init(chartDom)
    const option = {
        legend:{},
        tooltip:{},
        xAxis: {
            type: 'category'
        },
        yAxis: [{
            min: -100,
            max: 100
        }, {
            min: -100,
            max: 0
        }],
        dataset: {
            source: [
                ['product', '2012', '2013', '2014', '2015'],
                ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
                ['Milk Tea', -86.5, -92.1, -85.7, -83.1]
            ]
        },
        series:[{
            type:'bar',seriesLayoutBy: 'row', yAxisIndex: 0,color:'rgb(238, 102, 102)',barWidth:30
        },{
            type: 'line', seriesLayoutBy: 'row', yAxisIndex: 1,color:'rgb(145, 204, 117)'
        }]
    }
    chart.setOption(option)
</script>
</body>
</html>